<template>
  <view class="box">
    <view class="top">
       你好第: {{volunteerInfo.id}}位志愿者
    </view>

    <view class="container-login">
      <!-- 图标区域 -->
      <view class="icon-box">
        <!-- 登录后的头像 -->
        <img :src="userInfo.avatarUrl" class="avatar" v-if="avatarUrl" alt="">

      </view>
      <!-- 点击按钮区域 -->
      <view class="name">
        <text>志愿者：{{volunteerInfo.name}}</text>
      </view>
      <u-button type="success" text="查看活动" @click="gotoVolunteerCenter"></u-button>
      <text class="tips-text">点击进入活动中心</text>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex"
  export default {
    name: "IVolunteer",
    data() {
      return {
        avatarUrl: true
      };
    },
    computed: {
      ...mapState('m_volunteer', ['volunteerInfo']),
      ...mapState('m_user',['userInfo'])
    },
    methods: {
      gotoVolunteerCenter() {
        uni.navigateTo({
          url:".//subpkg/volunteer-centeer/volunteer-centeer"
        });
      }
    },

  }
</script>

<style lang="scss">
  .top {
    background-color: #F8F8F8;
    padding:10px;
  }
  .container-login {
    height: 650rpx;
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;

    &::after {
      content: ' ';
      width: 100%;
      height: 40px;
      background-color: white;
      position: absolute;
      bottom: 0px;
      left: 0px;
      border-radius: 100%;
      transform: translateY(50%);
    }

    .icon-box {
      border: 4px solid white;
      border-radius: 100%;
      padding: 5px;
      margin-bottom: 30px;

      .avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
      }
    }

    .tips-text {
      font-size: 12px;
      color: gray;
      margin-top: 4px;
    }

    .name {
      margin-bottom: 10px;
    }

  }
</style>
